import { useComponentStore } from "../../../editor/stores/components"
import TextArea from "antd/es/input/TextArea"
import { useState, useEffect } from "react"

export interface GoToLinkConfig {
    type: 'goToLink',
    url: string
}

export interface GoToLinkProps {
    value?: string,
    defaultValue?: string,
    onChange?: (config: GoToLinkConfig) => void
}

// 接收 GotoLinkProps， 返回 GoToLinkConfig
export function GoToLink(props: GoToLinkProps){
    const {value:val, defaultValue, onChange } = props

    const { curComponentId } = useComponentStore()
    const [value, setValue] = useState(defaultValue)

    useEffect(() => {
        console.log("action", val)
        if (val) {
            setValue(val)
        }
    }, [val])

    function urlChange(value: string){
        if (!curComponentId) return 

        setValue(value)

        onChange && onChange({
            type: 'goToLink',
            url: value
        })
    }

    return (
        <div className='mt-[10px]'>
        <div className="flex items-center gap-[10px]">
            <div>链接</div>
            <div>
                <TextArea 
                    style={{height: 200, width: 300, border: "1px solid #ccc"}}
                    value={ value || '' } 
                    onChange={(e) => urlChange(e.target.value)} 
                />
            </div>
        </div>
    </div>
    )
}